<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import dayjs from 'dayjs';

const someDate = ref(dayjs());
const dateRange = computed(() => [someDate.value.toDate(), someDate.value.toDate()]);

const currentDate = ref(new Date);
watch(() => currentDate.value, (nv, ov) => {
  console.log(dayjs(nv).format('YYYY-MM-DD HH:mm:ss'))
})
onMounted(() => {
  
});
const events = [
  {id: 1, _type: '工单', level: '高', user: '吴卫东', info: 'XXX站点复位站点复位站点复位站点复位站点复位' },
];
const xunjian = [
  {id: 1, _type: '巡检', level: '低', user: '王佛兰', info: '巡检任务名称巡检任务名称巡检任务名称巡检任务名称巡检任务名称巡检...' },
];
const baoyang = [
  {id: 1, _type: '保养', level: '中', user: '赵俊英', info: '保养任务名称保养任务名称保养任务名称...' },
];
// const taskList = events.concat(xunjian).concat(baoyang);
const taskList = [];

</script>

<template>
  <div class="task-container flex flex-column">
    <div class="line1 flex--center">
      <span>{{ dayjs(currentDate).format('YYYY/MM/DD') }}</span>
      <button @click="someDate = dayjs()">回到今日</button>
    </div>
    <div class="calendar-line flex--center">
      <el-icon @click="someDate = dayjs(someDate).subtract(1, 'week')"><arrow-left /></el-icon>
      <el-calendar v-model="currentDate" :range="dateRange" />
      <el-icon @click="someDate = dayjs(someDate).add(1, 'week')"><arrow-right /></el-icon>
    </div>
    
    <div class="task-box">
      <div class="task-item" v-for="item in taskList" v-if="taskList.length">
        <div class="taskitem-attr flex--center">
          <div :class="{'高': 'high', '中': 'mid', '低': 'low'}[item.level]">{{ item.level }}</div>
          <span>{{ item._type }} | {{ item.user }}</span>
        </div>
        <div class="task-info ellipsis">{{ item.info }}</div>
      </div>
      <div class="task-item flex-center" v-else>暂无工作任务</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.task-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .line1 {
    padding: 0 12px;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    button {
      margin-left: auto;
      padding: 0;
      border: none;
      background-color: transparent;
      color: #0079FE;
      cursor: pointer;
    }
  }
}
.calendar-line {
  width: 100%;
  padding: 0 12px;
  i {
    cursor: pointer;
  }
}
.task-box {
  padding: 0 12px;
  overflow: auto;
  .task-item {
    color: #000;
    padding: 10px 12px;
    &:hover {
      background-color: #F7FAFF;
    }
    .taskitem-attr {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      .high, .mid, .low {
        width: 28px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 2px;
        font-weight: 400;
        font-size: 12px;
        margin-right: 6px;
      }
      .high {
        background: rgba(255,120,47,0.1);
        border: 1px solid #EB5E12;
        color: #EB5E12;
      }
      .mid {
        background: rgba(255,186,47,0.1);
        border: 1px solid #FAAD14;
        color: #FAAD14;
      }
      .low {
        background: rgba(47,130,255,0.1);
        border: 1px solid #2F51FF;
        color: #2F51FF;
      }
    }
    .task-info {
      width: 100%;
      margin-top: 5px;
      font-weight: 400;
      font-size: 14px;
      color: #111111;
    }
  }
}
</style>

<style scoped>
:deep(.el-calendar__header) {
  display: none;
}
:deep(.el-calendar__body) {
  padding: 12px;
}
:deep(.el-calendar__body table thead th) {
  padding: 0;
  height: 28px;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
:deep(.el-calendar__body table tbody tr td) {
  border: none;
}
:deep(.el-calendar-day) {
  width: 100%;
  height: fit-content;
  padding: 0;
  padding-top: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
:deep(.el-calendar-day:hover) {
  background-color: transparent;
}
:deep(.el-calendar-day span) {
  width: 33px;
  height: 33px;
  line-height: 33px;
  font-size: 14px;
  text-align: center;
  display: block;
  border-radius: 50%;
  color: #000;
}
:deep(.el-calendar-day span:hover) {
  background-color: #ecf5ff;
}
:deep(.current.is-selected) {
  background-color: transparent;
}
:deep(.current.is-selected .el-calendar-day span) {
  background-color: #0079FE;
  color: #fff;
}
</style>